/*频谱*/
.audio-pu{
    width:2rem;height:1rem;padding-top: .5rem;
    position: absolute;left:0;top:0;
    -webkit-box-reflect: below .01rem -webkit-linear-gradient(top,rgba(250,250,250,.05),rgba(250,250,250,.1) 50%,rgba(250,250,250,.8));
}
.audio-pu .au-div{
    width:4.5%;height:100%;margin-right: 1px;position: absolute;bottom:0;
    background: linear-gradient(to top,#7713c7,#7211c7,#7713c7,#7713c7,#5210fb,#0125fc,#7713c7,#5464c5,#83c0f2);
}
.audio-pu .au-div:after{
    content: "♪";display: block;position: absolute;left:0;top:-.2rem;font-size: .1rem;
    width:100%;height:.1rem;text-align: center;line-height: .1rem;;
}

.audio-pu .au-1{
    height:10%;left:0;
    animation: au-1 .3s ease-out infinite alternate;
}
.audio-pu .au-2{
    height:13%;left:5%;
    animation: au-2 .3s ease-out infinite alternate;
}
.audio-pu .au-3{
    height:8%;left:10%;
    animation: au-3 .3s ease-out infinite alternate;
}
.audio-pu .au-4{
    height:22%;left:15%;
    animation: au-4 .3s ease-out infinite alternate;
}
.audio-pu .au-5{
    height:40%;left:20%;
    animation: au-5 .3s ease-out infinite alternate;
}
.audio-pu .au-6{
    height:46%;left:25%;
    animation: au-6 .3s ease-out infinite alternate;
}
.audio-pu .au-7{
    height:70%;left:30%;
    animation: au-7 .3s ease-out infinite alternate;
}
.audio-pu .au-8{
    height:94%;left:35%;
    animation: au-8 .3s ease-out infinite alternate;
}
.audio-pu .au-9{
    height:96%;left:40%;
    animation: au-9 .3s ease-out infinite alternate;
}
.audio-pu .au-10{
    height:80%;left:45%;
    animation: au-10 .3s ease-out infinite alternate;
}
.audio-pu .au-11{
    height:30%;left:50%;
    animation: au-11 .3s ease-out infinite alternate;
}
.audio-pu .au-12{
    height:60%;left:55%;
    animation: au-12 .3s ease-out infinite alternate;
}
.audio-pu .au-13{
    height:46%;left:60%;
    animation: au-13 .3s ease-out infinite alternate;
}
.audio-pu .au-14{
    height:74%;left:65%;
    animation: au-14 .3s ease-out infinite alternate;
}
.audio-pu .au-15{
    height:50%;left:70%;
    animation: au-15 .3s ease-out infinite alternate;
}
.audio-pu .au-16{
    height:38%;left:75%;
    animation: au-16 .3s ease-out infinite alternate;
}
.audio-pu .au-17{
    height:42%;left:80%;
    animation: au-17 .3s ease-out infinite alternate;
}
.audio-pu .au-18{
    height:24%;left:85%;
    animation: au-18 .3s ease-out infinite alternate;
}
.audio-pu .au-19{
    height:16%;left:90%;
    animation: au-19 .3s ease-out infinite alternate;
}
.audio-pu .au-20{
    height:13%;left:95%;
    animation: au-20 .3s ease-out infinite alternate;

}

/*频谱动画*/
@keyframes au-1 {
    from{height:8%;}
    to{height:16%;}
}
@keyframes au-2 {
    0%{height:13%;}
    30%{height:24%;}
    60%{height:26%;}
    90%{height:30%;}
    90%{height:14%;}
}
@keyframes au-3 {
    0%{height:8%;}
    30%{height:16%;}
    60%{height:36%;}
    90%{height:20%;}
    90%{height:10%;}
}
@keyframes au-4 {
    0%{height:16%;}
    30%{height:6%;}
    100%{height:12%;}
}
@keyframes au-5 {
    0%{height:40%;}
    30%{height:36%;}
    60%{height:20%;}
    90%{height:54%;}
    90%{height:36%;}
}
@keyframes au-6 {
    0%{height:42%;}
    30%{height:76%;}
    60%{height:70%;}
    90%{height:54%;}
    90%{height:36%;}
}
@keyframes au-7 {
    0%{height:70%;}
    30%{height:56%;}
    60%{height:40%;}
    90%{height:34%;}
    90%{height:66%;}
}
@keyframes au-8 {
    0%{height:110%;}
    10%{height:100%;}
    20%{height:60%;}
    30%{height:80%;}
    80%{height:124%;}
    90%{height:104%;}
    100%{height:116%;}
}
@keyframes au-9 {
    0%{height:70%;}
    10%{height:80%;}
    20%{height:90%;}
    30%{height:104%;}
    80%{height:20%;}
    90%{height:84%;}
    100%{height:100%;}
}
@keyframes au-10 {
    0%{height:80%;}
    30%{height:56%;}
    60%{height:36%;}
    90%{height:56%;}
    90%{height:76%;}
}
@keyframes au-11 {
    0%{height:30%;}
    30%{height:46%;}
    60%{height:50%;}
    90%{height:42%;}
    90%{height:32%;}
}
@keyframes au-12 {
    0%{height:70%;}
    10%{height:60%;}
    20%{height:80%;}
    30%{height:84%;}
    80%{height:20%;}
    90%{height:74%;}
    100%{height:96%;}
}
@keyframes au-13 {
    0%{height:60%;}
    10%{height:70%;}
    20%{height:80%;}
    30%{height:90%;}
    80%{height:80%;}
    90%{height:74%;}
    100%{height:56%;}
}
@keyframes au-14 {
    0%{height:80%;}
    30%{height:56%;}
    60%{height:36%;}
    90%{height:56%;}
    90%{height:76%;}
}
@keyframes au-15 {
    0%{height:50%;}
    30%{height:36%;}
    60%{height:26%;}
    90%{height:14%;}
    90%{height:26%;}
}
@keyframes au-16 {
    0%{height:30%;}
    10%{height:40%;}
    20%{height:30%;}
    40%{height:20%;}
    50%{height:10%;}
    60%{height:16%;}
    80%{height:20%;}
    90%{height:24%;}
    100%{height:34%;}
}
@keyframes au-17 {
    0%{height:42%;}
    30%{height:36%;}
    60%{height:26%;}
    90%{height:54%;}
    90%{height:38%;}
}
@keyframes au-18 {
    0%{height:24%;}
    30%{height:16%;}
    60%{height:12%;}
    90%{height:10%;}
    90%{height:20%;}
}
@keyframes au-19 {
    0%{height:20%;}
    30%{height:2%;}
    60%{height:18%;}
    90%{height:4%;}
    90%{height:16%;}
}
@keyframes au-20 {
    from{height:10%;}
    to{height:2%;}
}
/*音乐mp3*/
.audio-box{
    width:2rem;height:1.5rem;position: absolute;top:0;right:0;
}
.audio-mp3{
    width:0.52rem;height:0.52rem;position: absolute;z-index: 2;
    left:0;top:.8rem;right:0.4rem;bottom:0;margin:auto;
}
#audio-button{
    width:100%;height:100%;position: absolute;left:0;top:0;cursor: pointer;
    background: url(../images/index/yinxiang.png) no-repeat center center/cover;
    animation: audio .6s linear infinite;
}
@keyframes audio {
    0%{transform: scale(1);}
    10%{transform: scale(.9);}
    20%{transform: scale(.8);}
    30%{transform: scale(.7);}
    40%{transform: scale(.6);}
    50%{transform: scale(.8);}
    60%{transform: scale(1.1);}
    70%{transform: scale(.9);}
    80%{transform: scale(.8);}
    90%{transform: scale(.6);}
    100%{transform: scale(.8);}
}